import { Flex, Skeleton, Spinner } from '@chakra-ui/react';
import { ImageDTO } from '@tourfly/api';

type Props = { image: ImageDTO | undefined };

export const IAILoadingImageFallback = (props: Props) => {
  if (props.image) {
    return (
      <Skeleton
        sx={{
          w: `${props.image.width}px`,
          h: 'auto',
          objectFit: 'contain',
          aspectRatio: `${props.image.width}/${props.image.height}`,
        }}
      />
    );
  }

  return (
    <Flex
      sx={{
        opacity: 0.7,
        w: 'full',
        h: 'full',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 'base',
        bg: 'base.200',
        _dark: {
          bg: 'base.900',
        },
      }}
    >
      <Spinner size="xl" />
    </Flex>
  );
};
